<!-- 站内优选 -->
<template>
	<view class="container">
		<view class="content">
			<image class="bg" src="/pagesC-shopping/static/images/recommend-bg.png" mode="widthFix"></image>
			<text class="content-title">站内优选</text>
			<view class="list">
				<view class="list-item" v-for="(item, index) in list" :key="index" @click="handleNavToDetail(item)">
					<image class="pic" :src="item.pic" mode="aspectFit"></image>
					<text class="name">{{item.name}}</text>
					<view class="price-box" @click.stop="handleAddCard(item, index)">
						<text class="price">￥{{item.price}}</text>
						<button class="iconfont add-icon" :class="`add-icon-${index}`">&#xe612;</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, getCurrentInstance } from 'vue';
	import { useShopStore } from '../store.js';
	
	const store = useShopStore();

	const list = [
		{ pic: '/pagesC-shopping/static/images/will-delete/01.png', name: '舒绝杀蚁饵剂', price: '9.9' },
		{ pic: '/pagesC-shopping/static/images/will-delete/02.png', name: '舒绝杀蚁饵剂', price: '9.9' },
		{ pic: '/pagesC-shopping/static/images/will-delete/03.png', name: '赢立清杀蝇饵剂', price: '9.9' },
		{ pic: '/pagesC-shopping/static/images/will-delete/04.png', name: '火舒净杀虫粉剂', price: '9.9' },
	];

	// 跳转到商品详情
	const handleNavToDetail = (row) => {
		uni.navigateTo({
			url: '/pagesC-shopping/goods-detail/index'
		});
	}

	const instance = ref(null);
	
	onMounted(() => {
		instance.value = getCurrentInstance();
	});

	// 加到购物车
	const handleAddCard = (row, index) => {
		// uni.showToast({
		// 	icon: 'success',
		// 	title: '加入成功',
		// });
		uni.createSelectorQuery().in(instance.value).select('.add-icon-' + index).boundingClientRect((data) => {
			store.SET_ANIMATION_START_POINT(data.top, data.left);
		}).exec();
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 25rpx;
		margin-top: 20rpx;

		.content {
			position: relative;
			z-index: 1;
			height: 378rpx;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: 100%;
			}

			&-title {
				display: block;
				padding: 25rpx 0 0 29rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
				line-height: 1.5;
			}
		}
	}

	.list {
		display: flex;
		flex-wrap: nowrap;
		margin-top: 25rpx;
		overflow-x: auto;

		&-item {
			width: 168rpx;
			padding: 0 24rpx;

			.pic {
				width: 168rpx;
				height: 168rpx;
			}

			.name {
				display: block;
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
				line-height: 1.5;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 13rpx;

				.price {
					font-weight: bold;
					font-size: 30rpx;
					color: #FE3333;
				}

				.add-icon {
					font-size: 38rpx;
					color: #FE3333;
					background-color: transparent;
					transition: transform 0.2s;

					&:active {
						transform: scale(0.9);
					}
				}
			}
		}
	}
</style>